<template>
  <div class="usage-example">
    <h3>消息类型组件使用示例</h3>
    
    <!-- 在ChatContent.vue中的使用方式 -->
    <div class="example-section">
      <h4>在ChatContent.vue中的使用方式：</h4>
      <pre><code>
// 1. 导入消息类型组件
import {
  TextMessage,
  ImageMessage,
  VoiceMessage,
  FileMessage,
  CallMessage,
  AppLinkMessage,
  QuoteMessageComponent
} from './MessageTypes';

// 2. 注册组件
export default {
  components: {
    TextMessage,
    ImageMessage,
    VoiceMessage,
    FileMessage,
    CallMessage,
    AppLinkMessage,
    QuoteMessageComponent
  },
  // ...
}

// 3. 在模板中使用
&lt;template&gt;
  &lt;div v-for="(itemc, indexc) in recordContent" :key="indexc"&gt;
    &lt;div v-if="!itemc.isRetracted"&gt;
      &lt;!-- 对方消息 --&gt;
      &lt;div v-if="!itemc.isMyselfMsg" class="word"&gt;
        &lt;!-- 头像 --&gt;
        &lt;div @click="detail(itemc.receiveId, $event)"&gt;
          &lt;img :src="itemc.receiveAvatar" /&gt;
        &lt;div&gt;
        
        &lt;div class="info"&gt;
          &lt;!-- 使用消息类型组件 --&gt;
          &lt;TextMessage
            v-if="itemc.messageType === MESSAGE_TYPE.TEXT"
            :message="itemc"
          /&gt;
          
          &lt;ImageMessage
            v-else-if="itemc.messageType === MESSAGE_TYPE.IMAGE"
            :message="itemc"
            :default-image="defaultImage"
          /&gt;
          
          &lt;VoiceMessage
            v-else-if="itemc.messageType === MESSAGE_TYPE.VOICE_MSG"
            :message="itemc"
            :playing-voice-id="playingVoiceId"
            @play-voice="playVoice"
          /&gt;
          
          &lt;FileMessage
            v-else-if="itemc.messageType === MESSAGE_TYPE.FILE"
            :message="itemc"
            @download-file="downloadFile"
          /&gt;
          
          &lt;CallMessage
            v-else-if="itemc.messageType === MESSAGE_TYPE.VOICE_CALL || itemc.messageType === MESSAGE_TYPE.VIDEO_CALL"
            :message="itemc"
          /&gt;
          
          &lt;AppLinkMessage
            v-else-if="itemc.messageType === MESSAGE_TYPE.APP_LINK"
            :message="itemc"
            :default-app-icon="defaultAppIcon"
            @open-app-link="openAppLink"
          /&gt;
          
          &lt;QuoteMessageComponent
            v-else-if="itemc.messageType === MESSAGE_TYPE.QUOTE"
            :message="itemc"
            :default-avatar="defaultAvatar"
          /&gt;
        &lt;/div&gt;
      &lt;/div&gt;
    &lt;/div&gt;
  &lt;/div&gt;
&lt;/template&gt;
      </code></pre>
    </div>

    <!-- 组件特性说明 -->
    <div class="example-section">
      <h4>组件特性：</h4>
      <ul>
        <li><strong>TextMessage</strong>: 处理纯文本消息，支持HTML渲染和XSS防护</li>
        <li><strong>ImageMessage</strong>: 处理图片消息，支持预览和错误处理</li>
        <li><strong>VoiceMessage</strong>: 处理语音消息，支持播放状态和时长显示</li>
        <li><strong>FileMessage</strong>: 处理文件消息，支持下载和文件大小格式化</li>
        <li><strong>CallMessage</strong>: 处理语音/视频通话记录，支持状态显示</li>
        <li><strong>AppLinkMessage</strong>: 处理APP链接分享，支持应用信息展示</li>
        <li><strong>QuoteMessageComponent</strong>: 处理引用消息，支持被引用消息预览</li>
      </ul>
    </div>

    <!-- 扩展性说明 -->
    <div class="example-section">
      <h4>扩展性：</h4>
      <p>每个消息类型组件都是独立的，可以轻松添加新的消息类型：</p>
      <ol>
        <li>在 <code>MessageTypes</code> 目录下创建新的组件文件</li>
        <li>在 <code>index.js</code> 中导出新组件</li>
        <li>在 <code>MessageContent.vue</code> 中导入并使用</li>
        <li>在 <code>ChatContent.vue</code> 中添加对应的条件渲染</li>
      </ol>
    </div>

    <!-- 事件处理 -->
    <div class="example-section">
      <h4>事件处理：</h4>
      <p>各组件通过事件向父组件传递用户操作：</p>
      <ul>
        <li><code>@play-voice</code>: 语音播放事件</li>
        <li><code>@download-file</code>: 文件下载事件</li>
        <li><code>@open-app-link</code>: 打开应用链接事件</li>
      </ul>
    </div>
  </div>
</template>

<script>
export default {
  name: 'UsageExample'
}
</script>

<style scoped>
.usage-example {
  padding: 20px;
  max-width: 800px;
  margin: 0 auto;
}

.example-section {
  margin-bottom: 30px;
}

.example-section h4 {
  color: #333;
  margin-bottom: 10px;
}

pre {
  background: #f5f5f5;
  padding: 15px;
  border-radius: 4px;
  overflow-x: auto;
  font-size: 12px;
  line-height: 1.4;
}

code {
  font-family: 'Courier New', monospace;
}

ul, ol {
  padding-left: 20px;
}

li {
  margin-bottom: 5px;
}

strong {
  color: #409eff;
}
</style>
